var app = new Vue({
  el: '#app',
  data () {
    return {
      dialogShow: false, // 弹框显示
      otherMarket: false, // 弹框其它超市显示 
      cartShow: false, // 弹框购物车显示
      searchValue: '', // 搜索框关键字
      goodslist: null, // 商品列表数据
      marketlist: null, // 其它超市数据
      spreadRate: '', // 价差率
      num: 1, // 购物车弹框商品数量
      curIndex: 0, // 当前下标
      errMsg: '', // Toast提示框提示文字
      name: '', // 其它超市商品名
      currentPage: 0, // 当前页数
      totalPage: 2, // 总页数
      pageSize: 8, // 每页显示条数
      loading: false,
      Top: "", // 品牌输入框top
      Height: "", // 品牌输入框高度
      Width: "", // 品牌输入框宽度
      Left: "", // 品牌输入框left
      brandlist: null, // 品牌下拉列表数据
      brandId: "", // 品牌Id
      brandCategoryList: [],
      categoryId: "",
      ulWidth: "",
      isTap: false
    }
  },
  watch: {
    // searchValue: {
    //   handler(val) {
    //     console.log(val)
    //     console.log(this)
    //   },
    //   deep: true
    // },
    searchValue (val) {
      if (val!=="" && this.isTap == false) {
        this.getBrandData(val)
      }
    },
    // Toast提示框1秒后消失
    errMsg: function (newerrMsg, olderrMsg) {
      setTimeout(function() { 
        app.errMsg = ''    
      }, 1000);
    }
  },
  mounted: function () {
    this.$nextTick(() => {
      this.Width = this.$refs.sreachInput.getBoundingClientRect().width
      this.Top = this.$refs.sreachInput.getBoundingClientRect().top
      this.Height = this.$refs.sreachInput.getBoundingClientRect().height
      this.Left = this.$refs.sreachInput.getBoundingClientRect().left
    })
  },
  computed: {
    Style () {      
      return this.brandName === "" ? {
        top: this.Top + this.Height,
        width: this.Width,
        left: this.Left
      } : {
        top: this.Top + this.Height,
        width: this.Width,
        left: this.Left
      }
    }
  },
  methods: {
    // 返回
    goback () {
      window.history.go(-1);
    },
    // 搜索按钮
    submit () {
      this.loading = true
      this.currentPage = 1
      this.categoryId = ""
      this.goodslist = null
      this.searchData()
      this.getBrandCategory()      
    },
    loadMore () {// 滚动加载更多商品
      this.currentPage ++
      if (this.currentPage > this.totalPage) {
        this.loading = true
          return false
      }
      this.searchData()
    },
    // 获取商品数据
    searchData () {
      if (this.brandId!=="") {        
        Axios.post('/goods/goods/searchgoodsList.do', {
          brandId: this.brandId,
          categoryId: this.categoryId,
          currentPage: this.currentPage
        }).then(res => {
          if (res.respCode === "S") {
            console.log(this.currentPage)
            let list = res.data.data
            list.forEach(goods => {
              goods.minPrice = goods.minPrice / 100
            });
            if (this.currentPage == 1) {
              this.goodslist = list
            } else {
              this.goodslist = this.goodslist.concat(list)
            }
            this.totalPage = res.data.totalPage
            this.currentPage = res.data.currentPage
            console.log(this.currentPage)
            console.log(this.totalPage)
            if (this.currentPage < this.totalPage) {
              this.loading = false
            }         
            this.$nextTick(() => {
              let h3 = document.querySelector('.list').querySelectorAll('h3')
              let p = document.querySelector('.list').querySelectorAll('p')             
              if (this.currentPage == 1) {
                var i = 0
              } else {
                i = (this.currentPage - 1) * this.pageSize
              }
              for (let j = i; j < h3.length; j++) {
                if (h3[j].getBoundingClientRect().height > 21) {
                  p[j].style.bottom = "10vw"
                }
              }
            })   
          } else {
            this.goodslist = []
          }       			
        }).catch(err => {
          console.error(err)
        })
      }      
    },
    // 获取品牌列表数据
    getBrandData (val) {
      Axios.post('/brand/brand/searchBrand.do', {
        brandName: val
      }).then(res => {
        this.brandlist = res.data
			}).catch(err => {
        console.error(err)
      })
    },
    // 点击品牌列表
    getBrand (index) {
      this.isTap = true
      this.searchValue = this.brandlist[index].name
      this.brandId = this.brandlist[index].brandId
      this.brandlist = null
    },
    // 搜索框获取焦点事件
    getFocus () {
      this.isTap = false
    },
    // 获取品牌绑定分类数据
    getBrandCategory () {
      if (this.brandId!=="") {
        Axios.post('/goods/category/searchCategory.do', {
          brandId: this.brandId
        }).then(res => {
          this.brandCategoryList = res.data
          this.$nextTick(() => {
            this.countUlWidth()
            let wrapper = document.querySelector('#wrapper')
            myScroll = new IScroll(wrapper, { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
          })
        }).catch(err => {
          console.error(err)
        })
      }      
    },
    // 计算品牌绑定分类列表ul宽度
    countUlWidth () {
      if (this.brandCategoryList.length > 0) {
        let div = document.querySelector(".brandlist")
        let ul = document.querySelector(".brandlist ul")
        let ulWidth = ul.children[0].getBoundingClientRect().width * this.brandCategoryList.length
        div.style.width = ulWidth
      }      
    },
    // 点击分类获取数据
    getCategoryData (index) {
      this.currentPage = 1
      this.categoryId = this.brandCategoryList[index].categoryId
      Axios.post('/goods/goods/searchgoodsList.do', {
        brandId: this.brandId,
        categoryId: this.categoryId,
        currentPage: this.currentPage
      }).then(res => {
        if (res.respCode === "S") {
          let list = res.data.data
          list.forEach(goods => {
            goods.minPrice = goods.minPrice / 100
          });
          if (this.currentPage == 1) {
            this.goodslist = list
          } else {
            this.goodslist = this.goodslist.concat(list)
          }
          this.totalPage = res.data.totalPage
          this.currentPage = res.data.currentPage

          if (this.currentPage < this.totalPage) {
            this.loading = false
          }
          this.$nextTick(() => {
            let h3 = document.querySelector('.list').querySelectorAll('h3')
            let p = document.querySelector('.list').querySelectorAll('p')             
            if (this.currentPage == 1) {
              var i = 0
            } else {
              i = (this.currentPage - 1) * this.pageSize
            }
            for (let j = i; j < h3.length; j++) {
              if (h3[j].getBoundingClientRect().height > 21) {
                p[j].style.bottom = "10vw"
              }
            }
          })
        } else {
          this.goodslist = []
        }
			}).catch(err => {
        console.error(err)
      })
    },
    // 其它超市按钮
    otherPrice (index) {
      this.name = this.goodslist[index].fullName
      Axios.post('/goods/goods/supermarketPriceList.do', {
        goodsSkuId: this.goodslist[index].goodsSkuId
      }).then(res => {
        let list = res.data.supermarketGoodsList
        list.forEach(goods => {
          if (goods.price == -1) {
            goods.price = "暂无价格"
          } else {
            goods.price = goods.price / 100 + "元"
          } 
        });
        this.spreadRate = res.data.spreadRate        
        this.marketlist = list
        this.dialogShow = true
        this.otherMarket = true
			}).catch(err => {
        console.error(err)
      })
    },
    // 加入购物车按钮
    cartdialogShow (index) {
      this.dialogShow = true
      this.cartShow = true
      this.curIndex = index
    },
    // 取消按钮
    btnCancel () {
      this.dialogShow = false
      this.otherMarket = false
      this.cartShow = false
    },
    // 加号按钮
    btnPlus () {
      if (this.num < 99) {
        this.num = this.num + 1
      }
    },
    btnReduce () { // 减号按钮
      if (this.num > 1) {
        this.num = this.num - 1
      }
    },
    // 加入购物车确定按钮
    btnOk () {
      Axios.post('/goods/shopCar/addShopCar.do', {
        goodsSkuId: this.goodslist[this.curIndex].goodsSkuId,
        quantity: this.num
      }).then(res => {        
        this.errMsg = "您已提交成功<br/>请到购物车查看"
      }).catch(err => {
        console.error(err)
      })
      this.dialogShow = false
      this.cartShow = false
      this.num = 1
    }
  }
})